<template>
	<view>
		<scroll-view class="scroll-x" scroll-x="true" >
			<block v-if="type != 'info'">
				<view class="meal-item">
					<image v-if="!type" style="width: 176rpx;height: 176rpx;" src="http://jiaoyukehu.oss-cn-beijing.aliyuncs.com/static/pic1.png" mode=""></image>
						<image v-else style="width: 280rpx;height: 280rpx;" src="http://jiaoyukehu.oss-cn-beijing.aliyuncs.com/static/pic1.png" mode=""></image>
					<view class="line font32 color-181D18">
						打针服务…
					</view>	
					<text class="price f-b font32">¥8888</text>
				</view>
			</block>
			<block v-else>
				<view class="info-item">
					<view>
						<view class="text color-181D18 f-b font32">
							居家养老不苦恼，护士上 门助力护理难题
						</view>
						<text class="time font24">2023-03-03</text>
					</view>
					<image style="width: 180rpx;height: 180rpx;" src="http://jiaoyukehu.oss-cn-beijing.aliyuncs.com/static/pic1.png" mode=""></image>
				</view>
			</block>
		</scroll-view>
	</view>
</template>

<script setup lang="ts">
	const props = defineProps({
		type: {
			type: String,
			default: ''
		}
	})
</script>

<style lang="scss" scoped>
	.scroll-x {
		white-space: nowrap;
	}
	.meal-item {
		width: 176rpx;
		display: inline-block;
		margin-right: 20rpx;
		image {
			width: 176rpx;
			height: 176rpx;
			border-radius: 20rpx;
		}
		.line {
			margin: 10rpx 0;
		}
		.price {
			color: #F52200;
		}
	}
	.info-item {
		background: #F5F5F5;
		border-radius: 30rpx;
		height: 170rpx;
		padding: 20rpx 10rpx 10rpx 30rpx;
		position: relative;
		width: 556rpx;
		.text {
			width: 352rpx;
			white-space: pre-wrap;
		}
		.time {
			color: #B5B5B5;
			display: block;
			margin-top: 20rpx;
		}
		image {
			border-radius: 20rpx;
			position: absolute;
			right: 10rpx;
			top: 14rpx;
		}
	}
</style>